<template>
    <div class="project-all">

        <div>生活影集编辑：
            <div id="wangeditor">
                <div ref="editorElem" style="text-align:left;"></div>
            </div>
            <el-button type="primary" size="small" @click="submitLife">提交</el-button>
        </div>
    </div>

</template>

<script>
    import ProjectIntro from "./components/projectIntro"
    import Nav from "./components/nav"
    import E from "wangeditor";
    export default {

        data() {
            return {
                editor: null,
                life: {
                    id :1,
                    detail: ''
                },
                initHtml: ''

            }
        },
        mounted() {
            this.getLife();
            this.editor = new E(this.$refs.editorElem);
            this.editor.customConfig.showLinkImg = true;
            this.editor.customConfig.uploadImgServer = 'http://121.196.151.13:8088/upload/picture';
            this.editor.customConfig.uploadFileName = 'file';

            // 编辑器的事件，每次改变会获取其html内容
            this.editor.customConfig.onchange = html => {
                this.life.detail = html;
            };
            this.editor.customConfig.menus = [
                // 菜单配置
                'head', // 标题
                'bold', // 粗体
                'fontSize', // 字号
                'fontName', // 字体
                'italic', // 斜体
                'underline', // 下划线
                'strikeThrough', // 删除线
                'foreColor', // 文字颜色
                'backColor', // 背景颜色
                'link', // 插入链接
                'list', // 列表
                'justify', // 对齐方式
                'quote', // 引用
                'emoticon', // 表情
                'image', // 插入图片
                'table', // 表格
                'code', // 插入代码
                'undo', // 撤销
                'redo' // 重复
            ];
            this.editor.create();
        },
        methods: {
            getLife() {
                this.centralControl.axios.centralControl(
                    'getLife',
                    res => {
                        this.life =res
                        console.log(this.life.detail)
                        this.editor.txt.html(res.detail)
                    },
                    {}
                );
            },
            submitLife(){
                this.centralControl.axios.centralControl(
                    'updateLife',
                    res => {
                        this.$message({
                            message: '编辑生活影集成功',
                            type: 'success'
                        });
                        this.$router.push("/lifeAblum")
                    },
                    this.life
                );
            }
        }
    }
</script>

<style lang="less" scoped>
    .project-all {
        width: 95%;
        float: none;
        padding: 20px 30px;
        position: relative;
        /* width:870px;     */
        min-height: 500px;
        float:right;
        margin-top: 5px;
        padding: 20px 20px;
        background: #fff;
        border: 2px solid #00659B;
        border-radius: 10px;
        //border-image: -webkit-linear-gradient(#9ac330,#eeec90) 30 30;
        //border-image: -moz-linear-gradient(#9ac330,#eeec90) 30 30;
        //
    }

    .new-ctn {
        height: 646px;
        overflow: hidden;

    }
</style>
